Day 02｜換到全新資料夾後，網站還能不能跑？

Day 1 看過 Agent 呼叫 Tool 的完成畫面後，我沒有立刻開始寫 WebMCP，今天我們先將環境設定好。

這一天不加 Tool，也不碰 Gemini API Key。我想先回答一個更樸素的問題：讀者能不能
拿到和我相同的程式、相同的依賴，並且看到相同的結果？「我這裡能跑」還不夠。兩個人
可能拿到不同 commit、不同 Node.js 版本，甚至前端開在 5173，API 卻根本沒有啟動。
畫面看似相同，實驗條件早就分岔了。

這個系列用三組座標固定共同基線。

圖 1：版本、執行環境與驗證結果缺一不可。Day 2 的第一個程式 tag 是 v3-day-02。

我先停在固定 tag，而不是跟著 main 往前跑

專案要求 Node.js 22.12.0 以上。先確認本機工具：

git --version
node --version
npm --version

取得專案後，切換到固定 tag：

git clone https://github.com/eric861129/AgentReady-Events.git
Set-Location AgentReady-Events
git fetch --tags
git switch --detach v3-day-02
git rev-parse --short HEAD

預期 commit 是 7aa4e64。這個 tag 對應 branch
day-02-reproducible-baseline。文章以 tag 當固定引用，因為 branch 在正式發布前
仍可能修正名稱；annotated tag 會把讀者帶到確切 source state。

branch 與 tag 的用途不同。branch 適合瀏覽與繼續開發；tag 適合文章引用與重播。
若你只想跟著本篇操作，detached HEAD 沒有問題。要修改程式時，再從 tag 建自己的
練習 branch：

git switch -c practice/day-02

不要直接改動作者的 Day branch，也不要只記 main 當時指到哪裡。系列寫到後半段
時，main 一定已經往前走；同一篇文章若沒有 commit 或 tag，就失去重現意義。

這些 refs 已推送到公開 Repository。2026-07-30 另以全新匿名 clone 切到
v3-day-02，完成 47 個 Vitest 檔／138 項測試與 production build；讀者不必依賴
作者本機工作目錄。

頁面開得起來，還不代表整個網站已經啟動

專案有 package-lock.json，請使用 npm ci：

npm ci
npx playwright install chromium
npm run dev

npm run dev 會同時啟動兩個服務：

瀏覽器能看到頁面不表示環境完整。/events 由 Vite 提供，活動資料與 session 操作
則會透過 /api proxy 到 3000。API 沒起來時，外框仍可能出現，搜尋卻拿不到資料。

npm ci 也不是個人偏好。它依 lockfile 重建 node_modules，而且在
package.json 與 package-lock.json 不一致時直接失敗。相較之下，隨手執行
npm install <套件>@latest 可能連 lockfile 一起改掉，讀者得到的便不再是文章
驗證過的依賴樹。這個系列不需要全域安裝 Vite 或 Playwright；所有版本都跟著專案。

圖 2：啟動成功後可由首頁進入活動搜尋、我的報名與 Labs。Day 2 的重點是確認 Web、API 與共同工程基線都能重播。

看到這個畫面時，我先把結論停在「網站基線可以重播」。它還不能證明 Chrome 已經
偵測到 WebMCP，更不能證明 Agent 真的呼叫過 Tool。

我再跑一次測試與 build，排除「剛好能開」

另開終端機執行：

npm test
npm run build

本次重播結果是 47 個 Vitest 檔、138 項測試通過。npm run build 接著完成
TypeScript no-emit 檢查、Vite client build 與 esbuild server bundle。

兩個指令回答不同問題。npm test 檢查規則、contract、API 與安全測試；
npm run build 確認 production 產物真的能生成。它們都通過，也只能把證據推到
E2，不能推論瀏覽器已暴露 Tool。

最後再看一次工作目錄：

git status --short

剛 Clone 並執行驗證後，這裡應該沒有修改。若出現 package-lock.json、原始碼或
測試檔差異，先查清楚是哪個指令改了它們。帶著未說明的修改進入 Day 5，按鈕改名
就不再是唯一變因。

今天真正要留下的基線

完成前面的步驟後，開啟：

http://127.0.0.1:5173/events

我最後只確認四件事：

1. 活動搜尋頁能正常顯示。
2. 搜尋表單與活動資料可以讀取。
3. http://127.0.0.1:3000/health/live 回傳正常。
4. npm test 與 npm run build 都成功。

這就是後續 28 天共用的 Day 2 基本版本。現在不需要安裝 Inspector、申請 Gemini
API Key，也不需要看到任何 WebMCP Tool。先把人類可用的網站與固定版本跑起來，
就已經完成今天的任務。

若啟動失敗，再從兩個最基本的地方檢查：

• 執行 Get-Location，確認目前位於包含 package.json 的專案根目錄。
• 確認 3000 與 5173 沒有被自己先前啟動的服務占用。

這些是啟動排錯提示，不是每位讀者都會遇到的必要流程。

網站跑起來後，我下一步不是馬上叫 Agent 操作，而是先把 Inspector 關掉，自己走完
搜尋、收藏、報名與取消。只有先知道人類原本怎麼完成任務，後面才有資格判斷 Tool
究竟是在改善網站，還是只替 Demo 增加一層包裝。